<template>
  <div class="search-components">
    <div class="search-component">
      <div class="row keyword">
        <p class="label">关键词</p>
        <el-input
          v-model="searchModel.keyword"
          style="width: 200px"
          placeholder="计费规则名称"
          @keyup.enter="handleSearch"
        />
      </div>
      <div class="search-btn">
        <el-button class="reset-btn" type="primary" @click="handleReset">
          <img class="icon-img" :src="iconReset" alt="" />
          重置</el-button
        >
        <el-button class="submit-btn" type="primary" @click="handleSearch">
          <img class="icon-img" :src="iconSearch" alt="" />
          查询</el-button
        >
      </div>
    </div>
    <div class="submit-btns">
      <div></div>
      <div class="submit-btns-right">
        <el-button type="primary" class="submit-btn-add" @click="addData">
          <img class="icon-img" :src="iconAdd" alt="" />
          新增</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import iconSearch from "@/assets/image/btn/icon-search.png";
import iconReset from "@/assets/image/btn/icon-reset.png";
import iconAdd from "@/assets/image/btn/icon-add.png";
const emits = defineEmits(["search"]);

const searchModel = ref({
  keyword: "",
});

const handleReset = () => {
  searchModel.value.operation = 1;
  searchModel.value.keyword = "";
  emits("search", searchModel.value);
};

const handleSearch = () => {
  searchModel.value.operation = 2;
  //   console.log(`output-> searchModel.value`, searchModel.value);
  emits("search", searchModel.value);
};

const addData = () => {
  searchModel.value.operation = 3;
  emits("search", searchModel.value);
};
</script>

<style lang="less" scoped>
.search-components {
  display: flex;
  justify-content: space-between;
  .search-component {
    display: flex;
    flex-wrap: wrap;
    .row {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
    }
    .label {
      font-size: 14px;
      color: #333333;
      margin-right: 12px;
      font-weight: 400;
    }
    .keyword {
      margin-right: 50px;
    }
  }
  .search-btn {
    display: flex;
  }
  .reset-btn {
    background: #f2f3f5;
    border: 1px solid #f2f3f5;
    border-radius: 2px;
    color: #333333;
    padding: 5px 16px;
  }
  .submit-btn {
    background: #007aff;
    border: 1px solid #007aff;
    border-radius: 2px;
    // margin-left: 87px;
    padding: 5px 16px;
  }
  .icon-img {
    width: 16px;
    height: 16px;
    margin-right: 8px;
  }
  .submit-btns {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
  }
  .submit-btns-right {
    display: flex;
  }
  .submit-btn-add {
    background: #007aff;
    border: 1px solid #007aff;
    border-radius: 2px;
    margin-left: 87px;
    padding: 5px 16px;
  }

  .icon-img {
    width: 16px;
    height: 16px;
    margin-right: 8px;
  }
}
</style>